<template>
	<view class="news-box">
		<!--文章顶部信息-->
		<view class="news-header">
			
			<!--本地视频，支持小程序视频贴片广告-->
			<video v-if="newsInfo.video !==null" :src="newsInfo.video" unit-id="adunit-b6eed76c14bdc2ba"  controls></video>
			
			<!--文章标题-->
			<view class="news-title u-m-l-25 u-m-t-30">{{newsInfo.title}}</view>
			<!--流量主banner-->
			<!-- #ifdef MP-WEIXIN -->
			<ad unit-id="adunit-dac14813c5999d68"></ad>
			<!-- #endif -->
			<view class="news-header-info u-flex u-p-25">
				<view class="author u-m-r-15" v-if="newsInfo.author !== '' ">作者:{{newsInfo.author}}</view>
				<view class="views">阅读数:{{newsInfo.views}}</view>
			</view>
		</view>
		<!--文章内容-->
		<view class="news-content u-p-30">
			<u-parse :html="newsInfo.content" 
			         :selectable="true" 
					 :lazy-load="true" 
					 :show-with-animation="true"
				     :use-cache="true">
			</u-parse>
			<!--流量主banne2-->
			<!-- #ifdef MP-WEIXIN -->
			<ad unit-id="adunit-d1deae08381017a5"></ad>
			<!-- #endif -->
			<!--关联文章-->
			<view class="link-list u-m-b-40" v-for="(archive, index) in newsInfo.archive" :key="index">
				<view class="link-card u-border u-flex u-col-top u-m-b-30"
					@click="$Router.push({ path: '/pages/news/news', query: { id: archive.id } })">
					<u-image :src="archive.image" :width="180" :height="180" :lazy-load="true"></u-image>
					<view class="link-title u-m-l-20 ">{{archive.title}}</view>
					<view class="link-tag">
						<u-tag text="查看详情" shape="circle" type="primary" />
					</view>
				</view>
			</view>
			<!--关联商品-->
			<view class="link-list u-m-b-40" v-for="(goods, index) in newsInfo.goods" :key="index">
				<view class="link-card u-border u-flex u-col-top u-m-b-30"
					@click="$Router.push({ path: '/pages/goods/detail', query: { id: goods.id } })">
					<u-image :src="goods.image" :width="180" :height="180" :lazy-load="true"></u-image>
					<view class="link-title u-m-l-20 ">{{goods.title}}</view>
					<view class="link-tag">
						<u-tag text="查看详情" shape="circle" type="primary" />
					</view>
				</view>
			</view>

		</view>
		<!--文章底部-->
		<view class="tabbar-foot safe-area-inset-bottom">
			<view class="detail-box u-flex u-row-around">
				<view class="tools-item" @tap="onFavorite(newsInfo.id)">
					<image class="tool-img"
						:src="Boolean(newsInfo.favorite) ? $IMG_URL + '/imgs/detail/detail_favorite_end.png' : $IMG_URL + '/imgs/detail/detail_favorite.png'"
						mode=""></image>
					<text class="tool-title u-m-l-10">收藏</text>
				</view>
				<view class="tools-item" @tap="onShare">
					<image class="tool-img" :src="$IMG_URL + '/imgs/share/share.png'" mode=""></image>
					<text class="tool-title u-m-l-10">分享</text>
				</view>
			</view>
		</view>

		<!-- 分享组件 -->
		<shopro-share v-model="showShare" :shareDetail="shareInfo" :posterInfo="newsInfo" :posterType="'news'">
		</shopro-share>
		<!-- 登录 -->
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import share from '@/shopro/share';
	export default {
		components: {

		},
		data() {
			return {
				newsInfo: {},
				favorite: false,
				showShare: false,
			};
		},
		computed: {
			...mapState({
				isLogin: ({
					user
				}) => user.isLogin,
				authType: ({
					user
				}) => user.authType
			}),
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 48;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		onLoad() {
			this.getNewsDetail();
			let that = this;
			that.shareInfo = share.setShareInfo({
				title: that.newsInfo.title,
				desc: that.newsInfo.subtitle,
				image: that.newsInfo.image,
				params: {
					page: 2,
					pageId: that.$Route.query.id
				}
			});
		},

		methods: {
			getNewsDetail() {
				let that = this;
				return new Promise((resolve, reject) => {
					that.$http(
						'news.detail', {
							id: that.$Route.query.id
						},
						'',
						false
					).then(res => {
						if (res.code === 1) {
							that.showEmpty = false;
							that.newsInfo = res.data
							resolve(res.data);
							//that.getCommentList();
						} else {
							resolve(false);
							// that.$u.toast(res.msg);
							that.showEmpty = true;
							that.showEmptyText = res.msg;
						}
					});
				});
			},
			//收藏
			onFavorite(newsId) {
				let that = this;
				that.$http('news.favorite', {
					news_id: newsId
				}).then(res => {
					if (res.code === 1) {
						that.newsInfo.favorite = res.data;
						that.$u.toast(res.msg);
					}
				});
			},
			//分享
			onShare() {
				this.showShare = true;
			},
			// 路由跳转
			jump(path, parmas) {
				this.showShare = false;
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
		}
	};
</script>

<style style="scss" scoped>
	video {
		width: 100% !important;
	}

	.news-title {
		font-size: 38rpx;
		font-weight: 600;
	}

	.news-header-info {
		font-size: 22rpx;
		color: #c0c4cc;
	}

	.news-content {
		color: $u-content-color;
		font-size: 32rpx;
		line-height: 1.8;
		margin-bottom: 100rpx;
	}

	/*关联样式*/
	.link-card {
		height: 180rpx;
	}

	.link-tag {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}

	.tabbar-foot {
		min-height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
	}

	.tool-img {
		width: 46rpx;
		height: 46rpx;
	}
</style>
